<template>
  <div class="user">
    <router-link v-for="(uItem,uIndex) in userList"
      :key="uIndex"
      :to="`/${uItem.user}/${uItem.uid}/detail`"
      @mouseover.native="mouseoverA(uIndex,$event)"
      @mouseout.native="resetUserInfo"
    >@{{uItem.name}}</router-link>

    <useTips v-if="isShowUserTips" :name="userInfo.name" :uid="userInfo.uid" :position="position"></useTips>
  </div>
</template>

<script>
import useTips from '@/components/useTips.vue'
export default {
  name: 'User',
  components: {
    useTips
  },
  data() {
    return {
      userList:[
        {
          user: 'cyhwang',
          uid: 1,
          name: '黄岩'
        },
        {
          user: 'cyhwang',
          uid: 2,
          name: '黄岩2'
        },
        {
          user: 'cyhwang',
          uid: 3,
          name: '黄岩3'
        }
      ],
      isShowUserTips:false,
      userInfo: {
        uid: 0,
        name: '',
      },
      position:{
        x:0,
        y:0,
      }
    }
  },
  methods: {
    mouseoverA(index,e){
      let _this = this
      this.position.x = e.x
      this.position.y = e.y
      
      setTimeout(()=>{
        let userInfo = {}
        userInfo.uid = _this.userList[index].uid
        userInfo.name = _this.userList[index].name
        _this.userInfo = userInfo
        _this.isShowUserTips = true
      },400)
    },
    resetUserInfo(){
      this.userInfo = {
        uid: 0,
        name: '',
      },
      this.isShowUserTips = false
    }
  },
}
</script>
<style scoped>
  .user>a{
    margin:0 20px
  }
</style>